<template>
  <!-- 设备图片抓拍记录详情抽屉 -->  
  <div class="system-ys7CamerasCaptureLog-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>设备图片抓拍记录详情</h4>
      </template>
      <el-form ref="formRef" :model="formData" label-width="100px">          
        <el-row>        
          <el-col :span="12">          
            <el-form-item label="">{{ formData.id }}</el-form-item>          
          </el-col>        
          <el-col :span="12">            
            <el-form-item label="序列号">{{ formData.linkedDeviceSerial?formData.linkedDeviceSerial.name:'' }}</el-form-item>          
          </el-col>        
          <el-col :span="12">          
            <el-form-item label="通道">{{ formData.channel }}</el-form-item>          
          </el-col>        
          <el-col :span="12">          
            <el-form-item label="抓拍类型">{{ proxy.getOptionValue(formData.type, typeOptions,'value','label') }}</el-form-item>          
          </el-col>        
          <el-col :span="12">          
            <el-form-item label="图片地址">{{ formData.picUrl }}</el-form-item>          
          </el-col>        
          <el-col :span="12">
            <el-form-item label="抓拍时间">{{ proxy.parseTime(formData.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
          </el-col>        
          <el-col :span="12">          
            <el-form-item label="描述">{{ formData.description }}</el-form-item>          
          </el-col>        
          <el-col :span="12">          
            <el-form-item label="巡航抓拍结果">{{ formData.presetsCap }}</el-form-item>          
          </el-col>      
        </el-row>      
      </el-form>
    </el-drawer>
  </div>
</template>
<script lang="ts">
  import { reactive, toRefs, defineComponent,ref,unref,getCurrentInstance,computed } from 'vue';
  import {ElMessageBox, ElMessage, FormInstance,UploadProps} from 'element-plus';  
  import {
    listYs7CamerasCaptureLog,
    getYs7CamerasCaptureLog,
    delYs7CamerasCaptureLog,
    addYs7CamerasCaptureLog,
    updateYs7CamerasCaptureLog,    
    listYs7Cameras,    
  } from "/@/api/system/ys7CamerasCaptureLog";  
  import {
    Ys7CamerasCaptureLogTableColumns,
    Ys7CamerasCaptureLogInfoData,
    Ys7CamerasCaptureLogTableDataState,
    Ys7CamerasCaptureLogEditState,    
    LinkedYs7CamerasCaptureLogYs7Cameras,    
  } from "/@/views/system/ys7CamerasCaptureLog/list/component/model"
  export default defineComponent({
    name:"apiV1SystemYs7CamerasCaptureLogDetail",
    components:{      
    },
    props:{      
      deviceSerialOptions:{
        type:Array,
        default:()=>[]
      },      
      typeOptions:{
        type:Array,
        default:()=>[]
      },      
    },
    setup(props,{emit}) {      
      const {proxy} = <any>getCurrentInstance()
      const formRef = ref<HTMLElement | null>(null);
      const menuRef = ref();      
      const state = reactive<Ys7CamerasCaptureLogEditState>({
        loading:false,
        isShowDialog: false,
        formData: {          
          id: undefined,          
          deviceSerial: undefined,          
          linkedDeviceSerial:{deviceSerial:undefined,name:undefined },          
          channel: undefined,          
          type: undefined,          
          picUrl: undefined,          
          createdAt: undefined,          
          description: undefined,          
          presetsCap: undefined,          
          linkedYs7CamerasCaptureLogYs7Cameras: {            
            deviceSerial:undefined,    // 设备序列号            
            name:undefined,    // 设备名            
          },          
        },
        // 表单校验
        rules: {          
          id : [
              { required: true, message: "不能为空", trigger: "blur" }
          ],          
        }
      });
        // 打开弹窗
        const openDialog = (row?: Ys7CamerasCaptureLogInfoData) => {
          resetForm();
          if(row) {
            getYs7CamerasCaptureLog(row.id!).then((res:any)=>{
              const data = res.data;              
              state.formData = data;              
            })
          }
          state.isShowDialog = true;
        };
        // 关闭弹窗
        const closeDialog = () => {
          state.isShowDialog = false;
        };
        // 取消
        const onCancel = () => {
          closeDialog();
        };
        const resetForm = ()=>{
          state.formData = {            
            id: undefined,            
            deviceSerial: undefined,            
            linkedDeviceSerial:{deviceSerial:undefined,name:undefined },            
            channel: undefined,            
            type: undefined,            
            picUrl: undefined,            
            createdAt: undefined,            
            description: undefined,            
            presetsCap: undefined,            
            linkedYs7CamerasCaptureLogYs7Cameras: {              
              deviceSerial:undefined,    // 设备序列号              
              name:undefined,    // 设备名              
            },            
          }
        };        
        //关联ys7_cameras表选项
        const getYs7CamerasItemsDeviceSerial = () => {
          emit("getYs7CamerasItemsDeviceSerial")
        }
        const getDeviceSerialOp = computed(()=>{
          getYs7CamerasItemsDeviceSerial()
          return props.deviceSerialOptions
        })        
        return {
          proxy,
          openDialog,
          closeDialog,
          onCancel,
          menuRef,
          formRef,          
          getYs7CamerasItemsDeviceSerial,
          getDeviceSerialOp,          
          ...toRefs(state),
        };
      }
  })
</script>
<style scoped>  
  .system-ys7CamerasCaptureLog-detail :deep(.el-form-item--large .el-form-item__label){
    font-weight: bolder;
  }
  .pic-block{
    margin-right: 8px;
  }
  .file-block{
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    margin-bottom: 5px;
    padding: 3px 6px;
  }
  .ml-2{margin-right: 5px;}
</style>